<!--
 * @Author       : xiangmin
 * @File         : 表单里面嵌套表格的校验的各种情况
 * @Date         : 2023-07-19 16:38:04
 * @LastEditors  : xiangmin
 * @LastEditTime : 2023-07-23 23:13:45
-->
<template>
	<a-card>
		<a-form
			ref="validateForm"
			:model="form"
			@finish="handleFinish"
		>
			<a-table
				:columns="column"
				:data-source="form.list"
				rowKey="id"
				:pagination="false"
				:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
			>
				<template #bodyCell="{ record, index, column }">
					<template v-if="column.key === 'sex'">
						<a-form-item
							:name="selectedRowKeys.includes(record.id) ? ['list', index, 'sex'] : ''"
							:rules="rules.sex"
						>
							<a-select
								v-model:value="record.sex"
								style="width: 200px"
							>
								<a-select-option value="1">男</a-select-option>
								<a-select-option value="2">女</a-select-option>
								<a-select-option value="3">妖怪</a-select-option>
							</a-select>
						</a-form-item>
					</template>
					<template v-if="column.key === 'age'">
						<a-form-item
							:name="selectedRowKeys.includes(record.id) ? ['list', index, 'age'] : ''"
							:rules="[
								{
									required: true,
									trigger: 'blur',
									validator: (_, value) => validatorAge(value, record)
								}
							]"
						>
							<a-input v-model:value="record.age">
								<template #addonAfter>
									<save-outlined
										class="cursor-pointer"
										@click="handleSaveBtnClick(index)"
									/>
								</template>
							</a-input>
						</a-form-item>

						<!-- 隐藏属性，提交成功后会在每行上面 -->
						<div class="display-none">
							<a-form-item :name="['list', index, 'id']"></a-form-item>
						</div>
					</template>
				</template>
			</a-table>
			<a-form-item class="mt-20">
				<a-space>
					<a-button
						type="primary"
						@click="handleSubmit"
						>提交</a-button
					>
					<a-button
						type="primary"
						html-type="submit"
					>
						提交
					</a-button>
					<a-button @click="resetForm">Reset</a-button>
				</a-space>
			</a-form-item>
		</a-form>
	</a-card>
</template>
<script setup lang="ts">
/* eslint-disable */
import { SaveOutlined } from '@ant-design/icons-vue'
import type { Rule } from 'ant-design-vue/es/form'

const form = reactive({
	list: [
		{ id: '1', name: '唐僧', sex: '', age: '', describe: '他是师傅', limit: 30 },
		{ id: '2', name: '孙悟空', sex: '', age: '', describe: '他是大师兄', limit: 40 },
		{ id: '3', name: '沙和尚', sex: '', age: '', describe: '他是三师弟', limit: 50 },
		{ id: '4', name: '猪八戒', sex: '', age: '', describe: '他是猪八戒', limit: 60 }
	]
})

const validatorAge = async (value, row) => {
	if (!value) {
		return Promise.reject(new Error('年龄不能为空'))
	} else if (value > row.limit) {
		return Promise.reject(new Error('年龄不能超过限制的'))
	} else {
		return Promise.resolve()
	}
}
const rules: Record<string, Rule[]> = {
	sex: [{ required: true, message: '请选择性别', trigger: 'change' }]
}
const column = [
	{
		title: '姓名',
		key: 'name',
		dataIndex: 'name'
	},
	{
		title: '性别',
		key: 'sex'
	},
	{
		title: '年龄',
		key: 'age'
	},
	{
		title: '最大限制年龄',
		key: 'limit',
		dataIndex: 'limit'
	},
	{
		title: '描述',
		key: 'describe',
		dataIndex: 'describe'
	}
]
const selectedRowKeys = ref<string[]>([])
const onSelectChange = keys => {
	console.log(keys, form)
	selectedRowKeys.value = keys
}

const handleFinish = values => {
	console.log(values)
}

const validateForm = ref()
const handleSubmit = () => {
	validateForm.value
		.validate()
		.then(values => {
			console.log(values)
		})
		.catch(error => {
			console.log('error', error)
		})
}

const resetForm = () => {
	validateForm.value.resetFields()
}

const handleSaveBtnClick = (index: number) => {
	validateForm.value
		.validateFields([
			['list', index, 'sex'],
			['list', index, 'age'],
			['list', index, 'id']
		])
		.then(value => {
			console.log(value)
		})
		.catch(error => {
			console.log(error)
		})
}
</script>

<style scoped>
:deep(.ant-form-item) {
	margin-bottom: 0;
}
</style>
